<template>
  <div>
    <Button type="primary" style="margin-bottom: 20px" @click="handleAdd"
      >新增疫苗</Button
    >
    <Table
      :columns="columns"
      :data-source="petVaccinumList"
      :rowKey="(record) => record.id"
      bordered
    >
      <span slot="action" slot-scope="text, record">
        <a style="margin-right: 12px" @click="handleEdit(record)">编辑</a>
        <Popconfirm
          title="确定删除该项？"
          ok-text="确定"
          cancel-text="取消"
          @confirm.stop="handleDel(record.id)"
        >
          <a class="text_red"> 删除 </a>
        </Popconfirm>
      </span>
    </Table>
    <Modal
      title="管理疫苗"
      maskClosable
      :confirm-loading="confirmLoading"
      :visible="openModal"
      :width="700"
      @ok="handleOk"
      @cancel="openModal = false"
    >
      <VaccinumForm :form="vaccinumForm" @setVaccinumForm="setVaccinumForm" />
    </Modal>
  </div>
</template>

<script>
import { Button, Modal, Table, Popconfirm, message } from "ant-design-vue";
import { v4 as uuidv4 } from "uuid";
import VaccinumForm from "./Modules/vaccinumForm.vue";
import { sleep } from "../../utils/util";
import { findIndex } from "lodash";
export default {
  name: "VaccinumManage",
  components: { Button, Modal, Table, Popconfirm, VaccinumForm },
  data() {
    return {
      petVaccinumList:
        JSON.parse(localStorage.getItem("petVaccinumList")) || [],
      columns,
      vaccinumForm: {
        type: "",
        name: "",
        ingredients: "",
        batchNumber: null,
        lifespan: "",
      },
      openModal: false,
      confirmLoading: false,
    };
  },
  methods: {
    handleAdd() {
      this.vaccinumForm = {};
      this.openModal = true;
    },
    handleEdit(item) {
      this.openModal = true;
      console.log(item);
      this.vaccinumForm = item;
    },
    handleDel(id) {
      const index = findIndex(this.petVaccinumList, (l) => l.id === id);
      this.petVaccinumList.splice(index, 1);
      this.updateLo();
    },
    async handleOk() {
      this.confirmLoading = true;
      try {
        this.verification();
        const { id } = this.vaccinumForm;
        await sleep(800);
        const data = {
          id: uuidv4(),
          updateTime: new Date().toLocaleString(),
          ...this.vaccinumForm,
        };
        if (id) {
          const index = findIndex(this.petVaccinumList, (l) => l.id === id);
          this.petVaccinumList[index] = data;
        } else {
          this.petVaccinumList.unshift(data);
        }
        message.success("新增成功");
        this.updateLo();
        this.openModal = false;
      } finally {
        this.confirmLoading = false;
      }
    },
    setVaccinumForm({ type, value }) {
      this.vaccinumForm[type] = value;
      console.log(this.vaccinumForm);
    },
    verification() {
      const { type, ingredients, batchNumber, lifespan } = this.vaccinumForm;
      console.log("this.vaccinumForm", this.vaccinumForm);
      if (!type || !ingredients || !batchNumber || !lifespan) {
        message.error("请填写完整信息");
        throw new Error("请填写完整信息");
      }
    },
    updateLo() {
      localStorage.setItem(
        "petVaccinumList",
        JSON.stringify(this.petVaccinumList)
      );
    },
  },
};
const columns = [
  {
    title: "疫苗类型",
    dataIndex: "type",
    align: "center",
  },
  {
    title: "疫苗名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "适应症",
    dataIndex: "ingredients",
    align: "center",
  },
  {
    title: "批次号",
    dataIndex: "batchNumber",
  },
  {
    title: "有效期",
    dataIndex: "lifespan",
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    align: "center",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    width: 160,
    align: "center",
  },
];
</script>
<style lang="less" scoped>
.text_red {
  color: #ed6f6f !important;
}
</style>
